<template>
  <div class="cart">

    <el-table
      :data="cartlist"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column type="index" label="序号" width="180" align="center"></el-table-column>
      <el-table-column prop="goods_name" label="商品名称" width="180" align="center"></el-table-column>
      <el-table-column prop="price" label="价格" align="center"></el-table-column>
      <el-table-column label="数量" align="center">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.number" :min="1" :max="10" label="描述文字"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">

          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="total_warpper">
      <h3>共计：{{totalPrice}}</h3>
      <h3>总数：{{totalNumber}}</h3>
      <el-button type="danger" @click="subject()">提交订单</el-button>

    </div>

  </div>
</template>
<script>
  import cookie from 'vue-cookie'
  import jwtDecode from 'jwt-decode'
  export default {
    data() {
      return {

        multipleSelection: [], //存放已选择的数据
        formData: {
          goods_name: "",
          price: "",
          number: ""
        },
        editData: {},
        formLabelWidth: "200",
        //表格中的数据
        cartlist: [],
        order: {
          id: '',
          totalprice: 0,
          time: '',
          status: '',
          user_id: 0,
          cartdetails: [],

          // decode:{
          //   user:{}
          // },

          user: {
          },

        },
      };
    },
    methods: {
      findAll(){
        var token = window.localStorage.getItem("userS");
        const decode = jwtDecode(token)
        this.user=JSON.parse(decode.user);

        this.$axios.get("/cartdetail/findCart?id=" + this.user.id).then(res=>{
          this.cartlist = res.data.data;
        })


      },


      // 点击发生的变化
      handleSelectionChange(val) {
        this.multipleSelection = val; //给定义的数组赋值
      },
      handleDelete(index, row) {
        // this.tableData.splice(index, 1); //删除表格的数据
        console.log(row.id);
        this.$axios.get("/cartdetail/deleteCart?id=" + row.id ).then(res=>{
          console.log(res.data.code);
          this.findAll();
        })


      },
      subject() {
        var token = window.localStorage.getItem("userS");
        const decode = jwtDecode(token)
        this.user=JSON.parse(decode.user);
        this.order.cartdetails = this.multipleSelection;
        this.order.totalprice = this.totalPrice;
        this.order.user_id = this.user.id;

        this.$axios.post("/order/saveOrder",this.order).then(res=>{
          console.log(res.data.code)
          this.$router.push({name:"order",params:{id:res.data.message}});

        })


      }
    },
    mounted (){
      this.findAll();

    },
    // 通过computed计算属性及时改变
    computed: {
      // 总价
      totalPrice() {
        var price_total = 0;
        for (var i = 0; i < this.multipleSelection.length; i++) {
          price_total +=
            this.multipleSelection[i].price * this.multipleSelection[i].number;
        }
        return price_total;
      },
      // 总数
      totalNumber() {
        var number_total = 0;
        for (var i = 0; i < this.multipleSelection.length; i++) {
          number_total += this.multipleSelection[i].number;
        }
        return number_total;
      }
    },
    components: {}
  };
</script>

<style scoped>
  .cart {
    margin: 50px auto;
    width: 1000px;
  }
  .group_btn {
    margin-bottom: 30px;
  }
  .addDialog .el-input {
    width: 90%;
  }
  .total_warpper {
    text-align: right;
    margin-top: 30px;
  }
  h3 {
    margin-top: 10px;
  }
</style>
